<template>
  <el-cascader
    v-model="selectData"
    :options="options"
    :props="{ expandTrigger: 'hover' }"
    :filterable="filterable"
    :clearable="clearable"
    :disabled="disabled"
    :placeholder="placeholder"
    @change="change"
    style="width: 100%"
  ></el-cascader>
</template>

<script setup>
import { ref, watch } from "vue";

const props = defineProps({
  modelValue: {
    type: String
  },
  options: {
    // 选项数组
    type: Array,
    default: () => []
  },
  optionProps: {
    // 选项值对应字段
    type: Object,
    default: () => ({
      value: "value",
      label: "label",
      children: "children",
      emitPath: false
    })
  },
  filterable: {
    // 该选项是否可以被搜索
    type: Boolean,
    default: true
  },
  clearable: {
    type: Boolean,
    default: false
  },
  disabled: {
    type: Boolean,
    default: false
  },
  placeholder: {
    type: String,
    default: "请选择"
  },
  expandTrigger: {
    // 触发模式 click
    type: String,
    default: "hover"
  }
});

const selectData = ref([]);

const emit = defineEmits({
  ["update:modelValue"](value) {
    return value;
  },
  change(value) {
    return value;
  }
});

function change(val) {
  emit("update:modelValue", val[val.length - 1]);
  emit("change", val[val.length - 1]);
}

watch(
  () => props.modelValue,
  (val) => {
    selectData.value = val
  }
);
</script>
